<template>
  <div class="terminal-container" :class="{ 'fullscreen': isFullscreen }">
    <div class="terminal-header">
      <div class="terminal-title">
        <span class="terminal-icon">⚡</span>
        <span>SSH Terminal - {{ hostName }}</span>
        <span v-if="isFullscreen" class="fullscreen-badge">全屏模式</span>
      </div>
      <div class="terminal-actions">
        <button @click="triggerFileUpload" class="btn-upload" title="上传文件到服务器">
          📤 上传文件
        </button>
        <input 
          ref="fileInput" 
          type="file" 
          multiple
          @change="handleFileSelect"
          style="display: none;"
        />
        <button @click="showDownloadDialog" class="btn-download" title="从服务器下载文件">
          📥 下载文件
        </button>
        <button @click="toggleFullscreen" class="btn-fullscreen" :title="isFullscreen ? '退出全屏 (ESC)' : '全屏显示 (F11)'">
          <span v-if="isFullscreen">🗗</span>
          <span v-else>🗖</span>
        </button>
        <button @click="closeTerminal" class="terminal-close" title="关闭终端">✕</button>
      </div>
    </div>
    <div ref="terminalRef" class="terminal-body"></div>
    
    <!-- 文件上传进度提示 -->
    <div v-if="uploadingFiles.length > 0" class="upload-progress">
      <div v-for="file in uploadingFiles" :key="file.name" class="upload-item">
        <span>{{ file.name }}</span>
        <span class="upload-status">{{ file.status }}</span>
      </div>
    </div>
    
    <!-- 全屏提示 -->
    <div v-if="isFullscreen" class="fullscreen-hint">
      按 ESC 键退出全屏
    </div>
    
    <!-- 下载文件对话框 -->
    <div v-if="showDownloadModal" class="modal-overlay" @click="closeDownloadDialog">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>📥 下载文件</h3>
          <button @click="closeDownloadDialog" class="modal-close">✕</button>
        </div>
        <div class="modal-body">
          <div class="input-group">
            <label>远程文件路径：</label>
            <input 
              v-model="downloadPath" 
              type="text" 
              placeholder="例如: /tmp/example.txt 或 /home/user/file.tar.gz"
              class="path-input"
              @keyup.enter="handleDownload"
              ref="downloadPathInput"
            />
            <div class="input-hint">
              💡 提示：输入完整的文件路径，支持任何类型的文件
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button @click="closeDownloadDialog" class="btn-cancel">取消</button>
          <button @click="handleDownload" class="btn-confirm" :disabled="!downloadPath.trim()">开始下载</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { Terminal } from 'xterm'
import { FitAddon } from 'xterm-addon-fit'
import 'xterm/css/xterm.css'
import api from '../services/api'

const props = defineProps({
  hostId: {
    type: Number,
    required: true
  },
  hostName: {
    type: String,
    default: 'Unknown Host'
  }
})

const emit = defineEmits(['close'])

const terminalRef = ref(null)
const fileInput = ref(null)
const uploadingFiles = ref([])
const isFullscreen = ref(false)
const showDownloadModal = ref(false)
const downloadPath = ref('')
const downloadPathInput = ref(null)
let terminal = null
let fitAddon = null
let websocket = null
let isWaitingForRz = false
let currentWorkingDir = '/tmp'  // 默认工作目录
let pwdCallback = null  // pwd命令回调

onMounted(() => {
  initTerminal()
  connectWebSocket()
  
  // 监听键盘事件
  document.addEventListener('keydown', handleKeyDown)
})

onBeforeUnmount(() => {
  cleanup()
  document.removeEventListener('keydown', handleKeyDown)
})

const initTerminal = () => {
  terminal = new Terminal({
    cursorBlink: true,
    fontSize: 14,
    fontFamily: 'Consolas, Monaco, monospace',
    theme: {
      background: '#0f1923',
      foreground: '#ece8e1',
      cursor: '#00ffc8',
      cursorAccent: '#0f1923',
      selection: 'rgba(0, 255, 200, 0.3)',
      black: '#0f1923',
      red: '#ff4655',
      green: '#00ffc8',
      yellow: '#ffb800',
      blue: '#4d94ff',
      magenta: '#ff4d94',
      cyan: '#00ffc8',
      white: '#ece8e1',
      brightBlack: '#8b9aaa',
      brightRed: '#ff6b7a',
      brightGreen: '#33ffd4',
      brightYellow: '#ffc933',
      brightBlue: '#6ba8ff',
      brightMagenta: '#ff6ba8',
      brightCyan: '#33ffd4',
      brightWhite: '#ffffff'
    },
    cols: 80,
    rows: 24
  })

  fitAddon = new FitAddon()
  terminal.loadAddon(fitAddon)
  
  terminal.open(terminalRef.value)
  fitAddon.fit()

  // Handle terminal input
  terminal.onData((data) => {
    if (websocket && websocket.readyState === WebSocket.OPEN) {
      websocket.send(JSON.stringify({
        type: 'stdin',
        data: data
      }))
    }
  })

  // Handle window resize
  window.addEventListener('resize', handleResize)
}

const connectWebSocket = () => {
  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
  const token = localStorage.getItem('token')
  const wsUrl = `${protocol}//${window.location.host}/ws/ssh/${props.hostId}/?token=${token}`
  
  websocket = new WebSocket(wsUrl)

  websocket.onopen = () => {
    terminal.writeln('\x1b[32m正在连接到服务器...\x1b[0m')
  }

  websocket.onmessage = (event) => {
    try {
      const data = JSON.parse(event.data)
      
      if (data.type === 'stdout') {
        const output = data.data
        
        // 检测pwd命令的输出
        if (pwdCallback) {
          const lines = output.split('\n')
          for (const line of lines) {
            const trimmed = line.trim()
            // 匹配目录路径格式（以/开头）
            if (trimmed.startsWith('/') && !trimmed.includes(' ')) {
              pwdCallback(trimmed)
              pwdCallback = null
              break
            }
          }
        }
        
        terminal.write(output)
      } else if (data.type === 'connected') {
        terminal.writeln(`\r\n\x1b[32m${data.message}\x1b[0m\r\n`)
      } else if (data.type === 'error') {
        terminal.writeln(`\r\n\x1b[31mError: ${data.message}\x1b[0m\r\n`)
      }
    } catch (e) {
      console.error('WebSocket message parse error:', e)
    }
  }

  websocket.onerror = (error) => {
    terminal.writeln('\r\n\x1b[31mWebSocket连接错误\x1b[0m\r\n')
    console.error('WebSocket error:', error)
  }

  websocket.onclose = () => {
    terminal.writeln('\r\n\x1b[33m连接已断开\x1b[0m\r\n')
  }
}

const handleResize = () => {
  if (fitAddon) {
    fitAddon.fit()
    if (websocket && websocket.readyState === WebSocket.OPEN) {
      websocket.send(JSON.stringify({
        type: 'resize',
        cols: terminal.cols,
        rows: terminal.rows
      }))
    }
  }
}

const closeTerminal = () => {
  emit('close')
}

// 全屏功能
const toggleFullscreen = () => {
  isFullscreen.value = !isFullscreen.value
  
  // 延迟调整终端大小以确保DOM已更新
  setTimeout(() => {
    if (fitAddon) {
      fitAddon.fit()
      if (websocket && websocket.readyState === WebSocket.OPEN) {
        websocket.send(JSON.stringify({
          type: 'resize',
          cols: terminal.cols,
          rows: terminal.rows
        }))
      }
    }
  }, 100)
}

// 键盘快捷键处理
const handleKeyDown = (event) => {
  // F11 切换全屏
  if (event.key === 'F11') {
    event.preventDefault()
    toggleFullscreen()
  }
  
  // ESC 退出全屏
  if (event.key === 'Escape' && isFullscreen.value) {
    event.preventDefault()
    isFullscreen.value = false
    
    setTimeout(() => {
      if (fitAddon) {
        fitAddon.fit()
        if (websocket && websocket.readyState === WebSocket.OPEN) {
          websocket.send(JSON.stringify({
            type: 'resize',
            cols: terminal.cols,
            rows: terminal.rows
          }))
        }
      }
    }, 100)
  }
}

const triggerFileUpload = () => {
  // 先获取当前工作目录
  getCurrentDirectory().then(() => {
    fileInput.value.click()
  }).catch(() => {
    // 获取失败也允许上传，使用默认目录
    fileInput.value.click()
  })
}

const getCurrentDirectory = () => {
  return new Promise((resolve, reject) => {
    if (websocket && websocket.readyState === WebSocket.OPEN) {
      // 设置回调来接收pwd的输出
      const timeout = setTimeout(() => {
        pwdCallback = null
        reject(new Error('获取当前目录超时'))
      }, 2000)
      
      pwdCallback = (dir) => {
        clearTimeout(timeout)
        currentWorkingDir = dir
        resolve(dir)
      }
      
      // 发送pwd命令（静默执行）
      websocket.send(JSON.stringify({
        type: 'stdin',
        data: 'pwd\r'
      }))
    } else {
      reject(new Error('WebSocket未连接'))
    }
  })
}

const handleFileSelect = async (event) => {
  const files = Array.from(event.target.files)
  if (files.length === 0) return

  terminal.writeln(`\r\n\x1b[36m📤 准备上传 ${files.length} 个文件...\x1b[0m\r\n`)

  for (const file of files) {
    await uploadFile(file)
  }

  // 清空文件选择
  event.target.value = ''
}

const uploadFile = async (file) => {
  const uploadInfo = {
    name: file.name,
    status: '上传中...'
  }
  uploadingFiles.value.push(uploadInfo)

  try {
    terminal.writeln(`\x1b[36m📁 正在上传到 ${currentWorkingDir}: ${file.name} (${formatFileSize(file.size)})\x1b[0m\r\n`)

    const formData = new FormData()
    formData.append('file', file)
    formData.append('target_dir', currentWorkingDir)  // 传递目标目录

    const response = await api.post(`/hosts/${props.hostId}/upload_file/`, formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      },
      onUploadProgress: (progressEvent) => {
        const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
        uploadInfo.status = `${percentCompleted}%`
      }
    })

    terminal.writeln(`\x1b[32m✅ ${file.name} 上传成功！\x1b[0m\r\n`)
    terminal.writeln(`\x1b[32m   路径: ${response.path}\x1b[0m\r\n`)
    uploadInfo.status = '完成'
    
    // 1秒后移除上传记录
    setTimeout(() => {
      const index = uploadingFiles.value.indexOf(uploadInfo)
      if (index > -1) uploadingFiles.value.splice(index, 1)
    }, 1500)

    // 如果是在等待rz，发送Ctrl+C取消rz
    if (isWaitingForRz) {
      websocket.send(JSON.stringify({
        type: 'stdin',
        data: '\x03' // Ctrl+C
      }))
      isWaitingForRz = false
    }
  } catch (error) {
    console.error('文件上传失败:', error)
    terminal.writeln(`\x1b[31m❌ ${file.name} 上传失败: ${error.response?.data?.error || error.message}\x1b[0m\r\n`)
    uploadInfo.status = '失败'
    
    setTimeout(() => {
      const index = uploadingFiles.value.indexOf(uploadInfo)
      if (index > -1) uploadingFiles.value.splice(index, 1)
    }, 3000)
  }
}

const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]
}

const showDownloadDialog = () => {
  // 先获取当前工作目录
  getCurrentDirectory().then(() => {
    downloadPath.value = currentWorkingDir + '/'
    showDownloadModal.value = true
    // 延迟聚焦输入框，确保模态框已渲染
    setTimeout(() => {
      if (downloadPathInput.value) {
        downloadPathInput.value.focus()
        // 将光标移到末尾
        const len = downloadPath.value.length
        downloadPathInput.value.setSelectionRange(len, len)
      }
    }, 100)
  }).catch(() => {
    // 获取失败也允许下载，使用空路径
    downloadPath.value = ''
    showDownloadModal.value = true
    setTimeout(() => {
      if (downloadPathInput.value) {
        downloadPathInput.value.focus()
      }
    }, 100)
  })
}

const closeDownloadDialog = () => {
  showDownloadModal.value = false
  downloadPath.value = ''
}

const handleDownload = async () => {
  const remotePath = downloadPath.value.trim()
  
  if (!remotePath) {
    terminal.writeln('\r\n\x1b[31m❌ 请输入文件路径\x1b[0m\r\n')
    return
  }
  
  closeDownloadDialog()
  terminal.writeln(`\r\n\x1b[36m📥 正在从服务器下载文件: ${remotePath}\x1b[0m\r\n`)
  
  try {
    const response = await api.downloadFile(props.hostId, remotePath)
    
    // 从响应头中获取文件名
    const contentDisposition = response.headers['content-disposition']
    let filename = remotePath.split('/').pop() || 'download'
    
    if (contentDisposition) {
      const filenameMatch = contentDisposition.match(/filename="?(.+?)"?$/)
      if (filenameMatch) {
        filename = filenameMatch[1]
      }
    }
    
    // 创建下载链接
    const url = window.URL.createObjectURL(new Blob([response.data]))
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', filename)
    document.body.appendChild(link)
    link.click()
    
    // 清理
    link.remove()
    window.URL.revokeObjectURL(url)
    
    terminal.writeln(`\x1b[32m✅ 文件下载成功: ${filename}\x1b[0m\r\n`)
    terminal.writeln(`\x1b[32m   文件已保存到浏览器的下载文件夹\x1b[0m\r\n`)
  } catch (error) {
    console.error('文件下载失败:', error)
    
    // 尝试从 blob 中读取错误信息
    let errorMessage = error.message
    if (error.response && error.response.data instanceof Blob) {
      try {
        const text = await error.response.data.text()
        const errorData = JSON.parse(text)
        errorMessage = errorData.error || errorMessage
      } catch (e) {
        // 如果无法解析，使用默认错误信息
      }
    } else if (error.response?.data?.error) {
      errorMessage = error.response.data.error
    }
    
    terminal.writeln(`\x1b[31m❌ 文件下载失败: ${errorMessage}\x1b[0m\r\n`)
  }
}

const cleanup = () => {
  if (websocket) {
    websocket.close()
  }
  if (terminal) {
    terminal.dispose()
  }
  window.removeEventListener('resize', handleResize)
}
</script>

<style scoped>
.terminal-container {
  display: flex;
  flex-direction: column;
  height: 500px;
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
}

/* 全屏样式 */
.terminal-container.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999;
  border-radius: 0;
  margin: 0;
  border: none;
  animation: expandFullscreen 0.3s ease;
}

@keyframes expandFullscreen {
  from {
    transform: scale(0.95);
    opacity: 0.9;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.terminal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: var(--color-bg-tertiary);
  border-bottom: 2px solid var(--color-accent-cyan);
}

.terminal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--color-accent-cyan);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
}

.terminal-icon {
  font-size: 18px;
}

.fullscreen-badge {
  display: inline-block;
  padding: 2px 8px;
  background: linear-gradient(135deg, #FFB6C1, #FF69B4);
  color: #fff;
  font-size: 10px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(0.98);
  }
}

.terminal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-upload {
  padding: 6px 12px;
  background: linear-gradient(135deg, #00ffc8, #00d4a8);
  border: none;
  border-radius: 6px;
  color: #0f1923;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn-upload:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 255, 200, 0.4);
}

.btn-download {
  padding: 6px 12px;
  background: linear-gradient(135deg, #4d94ff, #6ba8ff);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn-download:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(77, 148, 255, 0.5);
  background: linear-gradient(135deg, #3a7dd9, #4d94ff);
}

.btn-fullscreen {
  padding: 6px 10px;
  background: linear-gradient(135deg, rgba(255, 182, 193, 0.2), rgba(135, 206, 250, 0.15));
  border: 1.5px solid rgba(255, 182, 193, 0.4);
  border-radius: 6px;
  color: #FFB6C1;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
}

.btn-fullscreen:hover {
  background: linear-gradient(135deg, rgba(255, 182, 193, 0.3), rgba(135, 206, 250, 0.2));
  border-color: #FFB6C1;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 182, 193, 0.4);
}

.terminal-close {
  background: transparent;
  border: none;
  color: var(--color-accent-red);
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.terminal-close:hover {
  color: #fff;
  transform: scale(1.2);
}

.terminal-body {
  flex: 1;
  padding: 10px;
  overflow: hidden;
}

.terminal-body :deep(.xterm) {
  height: 100%;
}

/* 文件上传进度 */
.upload-progress {
  position: absolute;
  top: 60px;
  right: 20px;
  background: rgba(15, 25, 35, 0.95);
  border: 2px solid var(--color-accent-cyan);
  border-radius: 8px;
  padding: 12px;
  min-width: 250px;
  max-width: 400px;
  box-shadow: 0 4px 20px rgba(0, 255, 200, 0.3);
  z-index: 100;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.upload-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 255, 200, 0.2);
  color: var(--color-text-primary);
  font-size: 13px;
}

.upload-item:last-child {
  border-bottom: none;
}

.upload-status {
  color: var(--color-accent-cyan);
  font-weight: 600;
}

/* 全屏提示 */
.fullscreen-hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(255, 182, 193, 0.95), rgba(255, 105, 180, 0.9));
  color: #fff;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(255, 182, 193, 0.4);
  z-index: 1000;
  animation: slideUpFade 0.5s ease, breathe 2s ease-in-out 0.5s infinite;
  pointer-events: none;
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes breathe {
  0%, 100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 0.7;
    transform: translateX(-50%) scale(0.98);
  }
}

/* 全屏模式下的终端主体 */
.terminal-container.fullscreen .terminal-body {
  padding: 15px;
}

/* 全屏模式下的头部 */
.terminal-container.fullscreen .terminal-header {
  padding: 16px 24px;
  background: linear-gradient(135deg, rgba(30, 40, 55, 0.98), rgba(20, 30, 50, 0.98));
  backdrop-filter: blur(10px);
}

/* 下载文件对话框 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease;
  backdrop-filter: blur(4px);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-content {
  background: linear-gradient(135deg, rgba(15, 25, 35, 0.98), rgba(20, 30, 45, 0.98));
  border: 2px solid rgba(0, 255, 200, 0.3);
  border-radius: 12px;
  min-width: 500px;
  max-width: 600px;
  box-shadow: 0 8px 32px rgba(0, 255, 200, 0.2);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 255, 200, 0.2);
}

.modal-header h3 {
  margin: 0;
  color: #00ffc8;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-close {
  background: transparent;
  border: none;
  color: #8b9aaa;
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.modal-close:hover {
  background: rgba(255, 70, 85, 0.2);
  color: #ff4655;
  transform: scale(1.1);
}

.modal-body {
  padding: 24px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.input-group label {
  color: #ece8e1;
  font-size: 14px;
  font-weight: 600;
}

.path-input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(30, 40, 55, 0.8);
  border: 2px solid rgba(0, 255, 200, 0.2);
  border-radius: 8px;
  color: #ece8e1;
  font-size: 14px;
  font-family: 'Consolas', 'Monaco', monospace;
  transition: all 0.3s ease;
  outline: none;
}

.path-input:focus {
  border-color: #00ffc8;
  box-shadow: 0 0 0 3px rgba(0, 255, 200, 0.1);
  background: rgba(30, 40, 55, 0.95);
}

.path-input::placeholder {
  color: rgba(139, 154, 170, 0.6);
}

.input-hint {
  color: #8b9aaa;
  font-size: 12px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid rgba(0, 255, 200, 0.2);
}

.btn-cancel {
  padding: 10px 20px;
  background: rgba(139, 154, 170, 0.2);
  border: 1.5px solid rgba(139, 154, 170, 0.4);
  border-radius: 8px;
  color: #8b9aaa;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-cancel:hover {
  background: rgba(139, 154, 170, 0.3);
  border-color: #8b9aaa;
  color: #ece8e1;
}

.btn-confirm {
  padding: 10px 20px;
  background: linear-gradient(135deg, #4d94ff, #6ba8ff);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(77, 148, 255, 0.3);
}

.btn-confirm:hover:not(:disabled) {
  background: linear-gradient(135deg, #3a7dd9, #4d94ff);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(77, 148, 255, 0.5);
}

.btn-confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>
